<template>
  <div class="device-manage">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="设备:">
        <el-input  v-model="formInline.sn" placeholder="请输入设备编号" />
      </el-form-item>
      <el-form-item label="标签:">
        <el-input v-model="formInline.tag" placeholder="请输入标签" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-scrollbar height="500px">
        <div style="overflow-x: hidden">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4"  v-for="(item, ind) in tableData"  :key="ind">
              <el-card>
                <div style="display: flex;justify-content: space-between">
                  <div class="item-device-id"> {{item.deviceId}}</div>
                  <el-switch v-model="item.status" active-color="#13ce66"  size="small"  @change="handleClick(item) "/>
                </div>
                <div class="item-device-tags"> 设备标签:<span class="tag">{{item.tag}}</span></div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { deviceStatus, getDevice } from '@/api/device'
@Options({})
export default class deviceManage extends Vue {
  private formInline: {[index:string]: any} = {}
  private page = 1
  private pageSize = 15
  private total = 1
  private tableData: any = []
  private tableColumnData = []

  private async getList () {
    const data: any = await getDevice({
      page: this.page,
      pageSize: this.pageSize,
      ...this.formInline
    })
    this.tableData = [...data.items]
    this.total = data.counts
  }

  private async handleClick (row: any) {
    const data: any = await deviceStatus({
      sn: row.deviceId,
      status: row.status
    })
    // if (!data) {
    //   this.$message.error(data.message || '请求失败')
    // }
  }

  // 查询
  private onSubmit () {
    this.page = 1
    this.getList()
  }

  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
.device-manage{
  width: 100%;
  padding:20px;
}
.content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.el-card{
  --el-card-padding: 8px 30px;
  min-width: calc(20% - 22px);
  height: 100px;
}
.el-row:first-child{
  margin-top: 10px;
}
.el-row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.item-device-id{
  font-size: 14px;
  color: #afb6ca;
}
.item-device-tags{
  margin-top: 5px;
  font-size: 12px;
  color: #afb6ca;
  .tag{
    display: inline-block;
    text-align: center;
    font-size: 12px;
    padding: 0 6px;
    line-height: 18px;
    background: rgba(255, 117, 42, 0.25);
    color: #ff752a;
    border-radius: 4px;
    margin: 0 2px 7px;
  }
}
</style>
